<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<style>
			/* 盒子模型4个元素:content内容,padding内边距,border边框,margin外边距 */
			.box{
				width:200px;  /*宽 */
				height:300px;  /*高*/
				/* border-width:1px;*/  /*边框宽度*/
				/*border-color:red; */  /*边框颜色：颜色单词， #6位十六进制数，rgb(三个值，每个值)
				/* 边框样式border-style:solid实线 dotted：点线 dashed：虚线 */
				/* border-style: solid;*/
				/* 边框的复合写法: */
				border:solid 1px rgb(168,62,177);
				border-bottom:10px dotted pink;
				border-top:10px dashed green;
				border-left:5px solid pink;
				border-right:5px solid gold;
				/*方位词:top上 ,bottom下 ,left左,right右边,center中间 */
				/* padding-top:50px;*/
				/* padding-left:30px;*/
				/*复合写法：*/
				/* padding:10px; 四个方位的内边距都是10px.*/
				/* padding:10px 30px;*/  第一个值指上下,第二个值指左右*/
				/* padding：10px 20px 30px;   第一个上，第二个左，第三个下*/
				/* padding: 10px 20px 30px 40px;    上,下,左,右  (顺时针)*/
				
				
			}
		</style>
	</head>
	<body>
		<div class="box">hi box</div>
	</body>
</html>
